<p>This test tabs between lots of elements, printing out the events you see along the way.</p>
<hr>
<div id="testDiv"></div>
<iframe id="testIframe" style="width: 800; height: 125; margin-top: 10px; border: 2px solid black"></iframe>
<pre id="console"></pre>

<script>

if (window.testRunner)
    testRunner.dumpAsText();

function log(s)
{
    document.getElementById('console').appendChild(document.createTextNode(s));
}

function description(element)
{
    var inputType = element.getAttribute('type');
    if (inputType)
        return inputType;
       
    if (element.toString().match(/iframe/i))
        return "IFRAME";
   
    if (element.toString().match(/javascript:/i))
        return "ANCHOR";

    if (element.toString().match(/textarea/i))
        return "TEXTAREA";

    if (element.toString().match(/div/i))
        return "DIV";

    return element.toString();
}

function keydownListener(event)
{
    log("keydown event: [to] " + description(event.target)  + "\n");
}

function blurListener(event)
{
    log("blur event: [to] " + description(event.target) + "\n");
}

var lastFocusedElement = null;
function focusListener(event)
{
    log('focus event: [to] ' + description(event.target) + '\n');
    lastFocusedElement = event.target;
}

function addEventListeners(element)
{
    element.addEventListener('keydown', keydownListener, false);
    element.addEventListener('focus', focusListener, false);
    element.addEventListener('blur', blurListener, false);
}

function addElements(parentElement)
{
    var inputTypes = [
        "BUTTON",
        "CHECKBOX",
        "FILE",
        "HIDDEN",
        "IMAGE",
        "ISINDEX",
        "PASSWORD",
        "RADIO",
        "RANGE",
        "RESET",
        "SEARCH",
        "SUBMIT",
        "TEXT"
    ];

    // Form elements
    for (var i = 0; i < inputTypes.length; ++i) { //>
        var input = parentElement.ownerDocument.createElement('input');
        input.type = inputTypes[i];
        addEventListeners(input);
        parentElement.appendChild(input);
    }
   
    // Textarea
    var textarea = parentElement.ownerDocument.createElement('textarea');
    addEventListeners(textarea);
    parentElement.appendChild(textarea);
   
    // Contenteditable
    var div = parentElement.ownerDocument.createElement('div');
    div.contentEditable = true;
    div.style.border = "1px solid black";
    addEventListeners(div);
    parentElement.appendChild(div);

    // Anchor
    var anchor = parentElement.ownerDocument.createElement('a');
    anchor.innerHTML = "anchor";
    anchor.href = "javascript:";
    addEventListeners(anchor);
    parentElement.appendChild(anchor);
}

function dispatchOptionTab(element)
{
    var isMac = navigator.platform.indexOf('Mac') == 0;
    var modifiers = [];
    if (isMac)
      modifiers = ["altKey"];
    eventSender.keyDown("\u0009", modifiers);
}

function setup()
{
    var testDiv = document.getElementById('testDiv');
    addElements(testDiv);

    var testIframe = document.getElementById('testIframe');
    addElements(testIframe.contentDocument.body);
    addEventListeners(testIframe);
}

setup();

log('PARENT DOCUMENT:\n');
document.getElementsByTagName('input')[0].focus();
for (var i = 0; i < 14; ++i) //>
    dispatchOptionTab(lastFocusedElement);

lastFocusedElement.blur();

log('\nIFRAME DOCUMENT:\n');
document.getElementById('testIframe').contentDocument.getElementsByTagName('input')[0].focus();
for (var i = 0; i < 14; ++i) //>
    dispatchOptionTab(lastFocusedElement);
</script>
